import React from 'react';
import { Dropdown, Menu } from 'antd';
import styles from './index.less';

const ToolBar = ({ conditions = [], onSelect = () => {} }) => {
    const menuItemList = conditions || [];

    const menu = (
        <Menu className={styles.toolbarDropDown}>
            {menuItemList.map(item => (
                <Menu.Item key={item.value}>
                    <a onClick={() => { onSelect({ type: 'condition', value: item }) }}>{item.name}</a>
                </Menu.Item>
            ))}
        </Menu>
    );

    return (
        <div className="toolbar">
            <ul className="toolbar_operator">
                {['+', '*', '/', '(', ')'].map(sign => (
                    <li onClick={() => { onSelect({ type: 'operator', value: sign }) }} key={sign}>
                        {sign}
                    </li>
                ))}
            </ul>
            <div className="toolbar_line" />
            <div className="toolbar_menu">
                <div className="toolbar_panel" onClick={e => e.preventDefault()}>
                    <span className="toolbar_panel_title">数字</span>
                    <span className="toolbar_panel_triangle" />
                    <div className="toolbar_panel_box">
                        <ul className="toolbar_panel_item">
                            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.'].map(num => (
                                <li onClick={() => { onSelect({ type: 'number', value: num }) }} key={num}>
                                    {num}
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>
            <div className="toolbar_line" />
            <div className="toolbar_menu">
                <Dropdown
                    overlay={menu}
                    placement="topCenter"
                >
                    <div className="toolbar_panel" onClick={e => e.preventDefault()}>
                        <span className="toolbar_panel_title">条件选择</span>
                        <span className="toolbar_panel_triangle" />
                    </div>
                </Dropdown>
            </div>
        </div>
    );
};

export default ToolBar;
